Vue.component("aui-daterange", {
    template: `
        <div :id="id" class="aui-daterange">
            <div class="aui-daterange__start"><input start ref="start" type="text" class="form-control"></div>
            <div class="aui-daterange__gutter"></div>
            <div class="aui-daterange__end"><input end ref="end" type="text" class="form-control"></div>
        </div>
    `,
    props: {
        async: {
            type: Boolean,
            default: true
        }
    },
    data() {
        var ret = {};
        ret.id = window.aui.Utils.uniqueSelector("daterange_");
        ret.start_value = "";
        ret.end_value = "";
        ret.start_date = {};
        ret.end_date = {};
        ret.options = {
          startdatepicker: {
              format: "yyyy-mm-dd",
              todayBtn: "linked",
              todayHighlight: true,
              language: 'zh-CN',
              weekStart: 7,
              container: `#${ret.id} .aui-daterange__start`,
              autoclose: true
          },
          enddatepicker: {
              format: "yyyy-mm-dd",
              todayBtn: "linked",
              todayHighlight: true,
              language: 'zh-CN',
              weekStart: 7,
              container: `#${ret.id} .aui-daterange__end`,
              autoclose: true
          }
        };
        return ret;
    },
    mounted() {
        var self = this;
        self.anuElement = {};
        self.anuElement.start = $(self.$refs.start);
        self.anuElement.end = $(self.$refs.end);
        if (!self.async) {
            self.init();
        }

        self.$watch("start_value", function (newval, oldval) {
            // self.setStartDate(new Date(newval));
        });

        self.$watch("end_value", function (newval, oldval) {
            // self.setEndDate(new Date(newval));
        });

        self.anuElement.start.on("changeDate", function (e) {
            self.start_value = e.target.value;
            self.changeStartDate(new Date(self.start_value));
        });

        self.anuElement.end.on("changeDate", function (e) {
            self.end_value = e.target.value;
            self.changeEndDate(new Date(self.end_value));
        });
    },
    methods: {
        init() {
            var self = this;
            self.anuElement.start.datepicker(self.options.startdatepicker);
            self.anuElement.end.datepicker(self.options.enddatepicker);
        },
        getRange() {
            var self = this;
            return {
                start_time: window.aui.Utils.getValuefromDate(self.start_date) / 1000,
                end_time: window.aui.Utils.getValuefromDate(self.end_date) / 1000 + 1
            }
        },
        getValue() {
            var self = this;
            return {
                start_time: self.start_value,
                end_time: self.end_value
            }
        },
        changeStartDate(date) {
            var self = this;
            self.start_date = date;
            self.anuElement.end.datepicker('setStartDate', self.start_date);
        },
        setStartDate(date) {
            var self = this;
            self.anuElement.start.datepicker('setDate', date);
        },
        changeEndDate(date) {
            var self = this;
            self.end_date = date;
            self.anuElement.start.datepicker('setEndDate', date);
        },
        setEndDate(date) {
            var self = this;
            self.anuElement.end.datepicker('setDate', date);
        }
    }
});